<template>
  <ZWSearch row-num="2" :option="searchOption" @search="search" @reset="reset" />
  <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()" @radioChange="chooseOfficialAccounts"> </ZwTable>
</template>

<script setup lang="tsx">
  import { reactive, ref, onMounted,computed, watch, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import {getStoreList, getStoreSourceList} from '@/api/ecommerce/storeManage'
  import {getOfficeAccountList} from '@/api/channelconfig/officeAccount'
  import {getOfficialArticleList} from '@/api/content/channelFootage/officialaccountgraphics'
  import ZWSearch from '@/components/zw/search-form/SearchForm'
  import { deepCopy } from '@/utils/helper'
  import ArticleDetail from '@/components/common/ArticleDetail.vue'
  import {getRandomKey} from '@/utils/utils'
  import ZwTable from '@/components/zw/table/Table'
  import { ArrowDown } from '@element-plus/icons-vue'


  const TableGraphicRef = ref<HTMLElement | null>()
  const selectedArr = reactive<any>([])
  const tableData = reactive<any>([])

  interface Props {
    multiple: boolean
    articleType: number
  }

  const props = withDefaults(defineProps<Props>(),{
	  multiple: true,
    articleType: 0
	})

  const emit = defineEmits(['submit'])

  const defaultParams = {
    type: 1,
    article_detail_type: '',
    draft_title: '',
    official_account_id: '',
    publish_state: '',
    page: 1,
    page_size: 15
  };
  const state = reactive({
    searchParams: deepCopy({...defaultParams, article_detail_type: props.articleType})
  })
  const getRowKey = (row: any) => {
    return row.id
  }
  const searchOption = computed(() => {
    return [
      {
        label: '标题搜索',
        name: 'draft_title',
        value: '',
        type: 'input',
        placeholder: '请输入标题搜索'
      },
      {
        label: "公众号",
        name: "official_account_id",
        value: "",
        type: "select",
        placeholder: "请选择公众号",
        fetchOptionApi: () => {
          return new Promise((resolve) => {
            let params = {
              page: 1,
              page_size: 100,
              verify_type_info: 0
            }
            getOfficeAccountList(params).then((res: any) => {
              let optionsArr: any = [];
              res.data.forEach((item: any) => {
                optionsArr.push(item);
                resolve(optionsArr);
              });
            });
          });
        },
        formatOption: (v: any) => ({
          label: v.nick_name,
          value: v.id
        }),
      }
    ]
  })
  const tableOption = computed(() => {
    const arr = [
      {
        width: 55,
        fixed: 'left',
        isRadio: true
      },
      {
         prop: 'date',
        label: '标题',
        render({ row }) {
          return (
            <>
              <div class="line3 title-text">{ row.draft_title || '--' }</div>
              <div  class="draft_title" vShow={row?.article_detail.length > 1 && row?.unfold}>
                  {
                    row.article_detail.map((ite:any) => {
                      return (
                        <div class="item">
                          <div class="img">
                            <img vShow={ite.cover} src={ite.cover} alt=""/>
                          </div>
                          <span class="title">{ ite.title }</span>
                        </div>
                      )
                    })
                  }
              </div>

              <div  class="draft_title" vShow={row.article_detail.length == 1 || (row.article_detail.length > 1 && !row.unfold)}>
                <div class="item">
                  <div class="img">
                    <img vShow={row.article_detail[0]?.cover} src={row.article_detail[0]?.cover} alt=""/>
                  </div>
                  <span class="title">{row.article_detail[0]?.title}</span>
                </div>
              </div>
              <div class="title-icon" vShow={row?.article_detail?.length > 1 && !row?.unfold} onClick={() => {row.unfold = true}}>
                <span>展开</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </div>
            </>
          )
        }
      },
      {
        prop: 'type',
        label: '图文类型',
        width: 220,
        render({ row }) {
          return <span>{row.type || '--'}</span>
        }
      },
      {
        prop: 'official_cover',
        label: '公众号',
        width: 220,
        render({ row }) {
          return (
            <div class="official">
              <div class="img">
                <img vShow={row.official_cover} src={row.official_cover} alt=""/>
              </div>
            <div class="name">{ row.official_name || '--'}</div>
           </div>
          )
        }
      }
    ]
    return arr
  })
  const fetchApi = () => {
    // 获取文件列表
    return getOfficialArticleList
  }
  const search = async (data: any):Promise<void>=>{
    state.searchParams = deepCopy({...defaultParams, ...data, article_detail_type: props.articleType })
  }
  const reset = async (v:any):Promise<void> => {
    state.searchParams = deepCopy(defaultParams)
  }

  const chooseOfficialAccounts = (row:any)=>{
    emit('submit', [row])
  }

</script>

<style lang="scss" scoped>
  :deep(.line3){
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      word-break: break-all;  
    }
    :deep(.title-text){
      text-align: left;
      font-size: 14px;
      color: #555;
      line-height: 1.6;
    }
    :deep(.draft_title){
      width: 100%;
      .item{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        &:last-of-type {
          border-bottom: none;
        }
        .img{
          width: 50px;
          height: 50px;
          border-radius: 8px;
          background-color: #f6f6f6;
          overflow: hidden;
          margin-right: 6px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          flex: 1;
          line-height: 1.6;
          font-size: 12px;
          color: #666;
          text-align: left;
        }
      }
    }
  
    :deep(.title-icon){
      display: flex;
      align-items: center;
      color: #FF6B00;
      margin-top: 6px;
      cursor: pointer;
      span{
        font-size: 12px;
      }
    }
  
    :deep(.official){
      width: 100%;
      display: flex;
      align-items: center;
      .img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #f6f6f6;
        margin-right: 6px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        flex: 1;
        line-height: 1.6;
        font-size: 13px;
        color: #555;
        text-align: left;
      }
    }
    .pagination{
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }
  </style>
  
  <style lang="scss">
  .el-table--scrollable-y ::-webkit-scrollbar {
        display: none;
      }
      .table_header_title {
        th.el-table__cell {
          background: #f9f9f9;
          padding: 10px 0;
        }
      }
    </style>
  
